<template>
	<view class="bg-home">
		<!-- 登录授权弹窗 -->
		<view v-if="showAuthModal" class="auth-modal-overlay" @tap="closeAuthModal">
			<view class="auth-modal" @tap.stop>
				<view class="auth-modal-header">
					<image class="auth-modal-logo" src="/static/other/logo2019.jpg" mode="aspectFit"></image>
					<view class="auth-modal-title">欢迎使用心域SAAS系统</view>
					<view class="auth-modal-subtitle">为了给您提供更好的服务，需要获取您的微信信息</view>
				</view>

				<view class="auth-modal-content">
					<view class="auth-benefits">
						<view class="benefit-item">
							<text class="benefit-icon">⚡欢迎加入</text>
							<text class="benefit-text">加入我们,一起成长!</text>
						</view>
					</view>
				</view>

				<view class="auth-modal-actions">
					<!-- 完整授权按钮 -->
					<button class="auth-btn auth-btn-primary" open-type="getPhoneNumber"
						@getphonenumber="handleCompleteAuth" :loading="isLogging">
						{{ isLogging ? '登录中...' : '完整授权登录' }}
					</button>

					<button class="auth-btn auth-btn-text" @tap="closeAuthModal">
						暂不登录
					</button>
				</view>
			</view>
		</view>

		<!-- 使用自定义导航组件 -->
		<custom-navbar title="首页"></custom-navbar>

		<view class="bg-p">
			<view class="">
				<image src="/static/other/bg-top.png" mode="aspectFill" class="bg-image"></image>
			</view>
			<!-- 使用搜索定位组件 -->
			<search-location @search="search"></search-location>
			<!-- 轮播图 start -->
			<view class="banner-model">
				<swiper class="banner" :autoplay="true" :interval="3000" :duration="1000" :circular='true'
					@change="onBannerChange">
					<swiper-item v-for="item in banner" :key="item.id">
						<image class="banner-img" :src="'https://iepsy.oss-cn-beijing.aliyuncs.com'+item.img" mode="">
						</image>
					</swiper-item>
				</swiper>
				<!-- 自定义轮播指示器 -->
				<view class="swiper-indicator">
					<view v-for="(item, index) in banner" :key="index"
						:class="['swiper-indicator-item', { 'swiper-indicator-active': currentBannerIndex === index }]">
					</view>
				</view>
			</view>
			<!-- 轮播图 end -->
		</view>


		<view class="content">


			<!-- 功能导航模块 start -->
			<view class="function-modules">
				<view class="function-modules-wrapper">
					<!-- 更多机构师模块 -->
					<view class="module-card" @click="navigateToPsychologist">
						<view class="module-icon">
							<image class="module-icon-img" src="/static/other/module-icon-one.png" mode="aspectFit">
							</image>
						</view>

					</view>

					<!-- 热门课程模块 -->
				<!-- 	<view class="module-card" @click="navigateToAppointment">
						<view class="module-icon">
							<image class="module-icon-img" src="/static/other/module-icon-two.png" mode="aspectFit">
							</image>
						</view>

					</view> -->

					<!-- 热门活动模块 -->
				<!-- 	<view class="module-card" @click="navigateToActivity">
						<view class="module-icon">
							<image class="module-icon-img" src="/static/other/module-icon-three.png" mode="aspectFit">
							</image>
						</view>

					</view> -->

					<!-- 心理咨询模块 -->
					<!-- <view class="module-card" @click="navigateToCenter">
						<view class="module-icon">
							<image class="module-icon-img" src="/static/other/module-icon-four.png" mode="aspectFit">
							</image>
						</view>

					</view> -->
				</view>
			</view>
			<!-- 功能导航模块 end -->

			<!-- 招聘模块 start -->
			<view class="recruitment">
				<view class="recruitment-box" @click="navigateToRecruitment">
					<image class="recruitment-box-img" src="/static/other/recruitment.png" mode=""></image>
				</view>
			</view>
			<!-- 招聘模块 end -->

			<!-- 附近机构模块样式 start -->
			<view class="institution">
				<view class="institution-title">
					<view class="institution-title-icn">
						<image class="institution-title-icn-img" src="/static/other/institutionicon.png" mode="">
						</image>
					</view>
					<view class="institution-title-title">附近机构</view>
				</view>
				<view class="institution-model">
					<view class="institution-model-one" v-for="item in institutionList" :key="item.id">
						<view class="institution-model-one-img" @click="navigateToInstitutionDetail(item.id)">
							<image class="institution-model-one-img-img"
								:src="'https://iepsy.oss-cn-beijing.aliyuncs.com/'+item.logo" mode="widthFix"></image>
						</view>
						<view class="institution-model-text" @click="navigateToInstitutionDetail(item.id)">
							<view class="institution-model-text-title">
								<view class="institution-model-text-title-name">{{item.name}}</view>
								<view class="institution-model-text-title-distance">
									<view class="institution-model-text-title-distance-img">
										<image class="institution-model-text-title-distance-img-img"
											src="/static/other/address.png" mode="widthFix"></image>
									</view>
									{{item.city}}
								</view>
							</view>
							<view class="institution-model-text-title-address">
								{{item.city}}{{item.province}}{{item.county}}{{item.address}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 附近机构模块样式 end -->
		</view>
	</view>
</template>

<script>
	import searchLocation from '../../components/search-location/search-location.vue';
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
	import {
		getBanner
	} from '../../api/api.js'
	import {
		getAgencList
	} from '../../api/api.js'
	import enhancedAuthManager from '../../utils/auth.js'
	import locationManager from '../../utils/location.js'

	export default {
		components: {
			searchLocation,
			customNavbar
		},
		data() {
			return {
				// banner数组
				banner: [],
				currentBannerIndex: 0,
				// 机构数组
				institutionList: [],
				// 登录相关状态
				showAuthModal: false,
				isLogging: false,
				userInfo: null,
				// 定位相关状态
				locationInfo: null,
				isLocating: false
			};
		},

		// 生命周期钩子，监听页面显示
        onShow() {
            // console.log('📱 首页显示，检查登录状态...')

            // 检查是否有选择的城市（从城市选择页面返回）
            const selectedCity = uni.getStorageSync('selectedCity');
            if (selectedCity) {
                // 更新组件中的城市信息
                uni.$emit('updateCity', selectedCity);
                // 清除缓存
                uni.removeStorageSync('selectedCity');
                // 更新附近机构数据
                this.updateInstitutionList();
                // 标记为用户手动选择了城市
                uni.setStorageSync('userSelectedCity', true);
            }

            // 静默检查登录状态，不显示弹窗
            this.checkLoginStatusSilently();

            // 如果用户已登录，检查定位状态
            if (enhancedAuthManager.isLoggedIn()) {
                this.checkLocationStatus();
            }
        },

		onLoad() {
			// console.log('🏠 首页加载完成，开始初始化...')
			this.initPage();
		},

		methods: {
			/**
             * 页面初始化
             */
            async initPage() {
                // console.log('🔄 页面初始化中...')

                // 1. 获取banner数据
                this.getbannerData();
                // 获取机构数据
                this.getAgencListData()

                // 2. 静默检查登录状态，不显示弹窗
                await this.checkLoginStatusSilently();

                // console.log('✅ 页面初始化完成')
            },

			/**
             * 静默检查登录状态（不显示弹窗）
             */
            async checkLoginStatusSilently() {
                try {
                    // console.log('🔍 静默检查登录状态...')
                    const result = await enhancedAuthManager.autoLogin();

                    if (result.isLoggedIn) {
                        // 已登录
                        this.userInfo = result.userInfo;
                        // console.log('✅ 用户已登录:', this.userInfo.nickname)
                        // 登录成功后检查定位状态
                        this.checkLocationStatus();
                    }
                    // 不再自动显示授权弹窗
                } catch (error) {
                    // console.error('❌ 检查登录状态失败:', error);
                }
            },

            /**
             * 检查登录状态并显示授权弹窗（用于需要登录的功能）
             */
            async checkLoginAndShowAuth() {
                try {
                    const result = await enhancedAuthManager.autoLogin();

                    if (result.isLoggedIn) {
                        // 已登录
                        this.userInfo = result.userInfo;
                        return true;
                    } else {
                        // 需要授权登录，显示弹窗
                        this.showAuthModal = true;
                        return false;
                    }
                } catch (error) {
                    console.error('❌ 检查登录状态失败:', error);
                    return false;
                }
            },

			/**
			 * 处理完整授权登录（简化方案：后台通过openid获取用户信息）
			 */
			async handleCompleteAuth(e) {
				// console.log('🔐 开始混合授权登录流程...')

				if (e.detail.errMsg !== 'getPhoneNumber:ok') {
					uni.showToast({
						title: '需要手机号授权才能使用完整功能',
						icon: 'none',
						duration: 3000
					});
					return;
				}

				this.isLogging = true;

				try {
					// console.log('📱 获取手机号授权数据:', e.detail)

					// 1. 立即获取微信登录code（减少延迟）
					// console.log('🔄 正在获取微信登录凭证...')
					const codeGetStartTime = Date.now();
					const code = await new Promise((resolve, reject) => {
						uni.login({
							provider: 'weixin',
							success: (loginRes) => {
								const codeGetTime = Date.now();
								// console.log('✅ 微信登录code获取成功:', loginRes.code)
								// console.log('⏰ res:', JSON.stringify(loginRes))
								resolve(loginRes.code)
							},
							fail: (error) => {
								console.error('❌ 微信登录code获取失败:', error)
								reject(error)
							}
						})
					});

					// 2. 准备基础用户信息（后台通过openid获取完整信息）
					const userInfo = {
						nickName: '微信用户', // 默认昵称，后台会通过openid获取真实信息
						avatarUrl: '/static/logo.png',
						gender: 0,
						country: '',
						province: '',
						city: '',
						language: 'zh_CN'
					};

					// console.log('📋 使用基础用户信息，后台将通过openid获取完整信息')

					// 3. 立即准备并发送登录数据（最小化延迟）
					const requestStartTime = Date.now();
					const loginData = {
						// 微信登录凭证（后端用来获取openid和session_key）
						code: code,

						// 加密的手机号数据（后端用来解密手机号）
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						cloudID: e.detail.cloudID,

						// 用户基本信息（来自微信或手动输入）
						userInfo: userInfo,

						// 额外信息
						timestamp: Date.now(),
						platform: 'wechat-miniprogram'
					}

					// console.log('🚀 立即发送登录请求，Code获取后延迟:', requestStartTime - codeGetStartTime, 'ms')
					// console.log('📋 发送数据:', {
					// 	code: loginData.code,
					// 	codeLength: loginData.code?.length,
					// 	hasEncryptedData: !!loginData.encryptedData,
					// 	encryptedDataLength: loginData.encryptedData?.length || 0,
					// 	hasIv: !!loginData.iv,
					// 	ivLength: loginData.iv?.length || 0,
					// 	nickName: loginData.userInfo.nickName,
					// 	avatarUrl: loginData.userInfo.avatarUrl,
					// 	requestTime: new Date().toISOString()
					// })

					// 4. 立即调用登录接口
					const result = await enhancedAuthManager.wxLogin(loginData);

					if (result.success) {
						// 保存登录信息
						enhancedAuthManager.saveLoginInfo(result.token, result.userInfo);

						this.userInfo = result.userInfo;
						this.showAuthModal = false;

						console.log('🎉 登录成功，获得完整用户信息:')
						// 登录成功后检查定位状态
						this.checkLocationStatus();
						console.log('📋 用户ID:', this.userInfo.id)
						console.log('🔑 OpenID:', this.userInfo.openid)
						console.log('📱 手机号:', this.userInfo.phone)
						console.log('👤 昵称:', this.userInfo.nickname)
						console.log('🖼️ 头像:', this.userInfo.avatar)
						console.log('🆕 是否新用户:', this.userInfo.isNewUser)
						console.log('💎 VIP等级:', this.userInfo.vipLevel)

						// 显示详细的成功信息
						const phoneDisplay = this.userInfo.phone ?
							`手机号: ${this.userInfo.phone}` :
							'未获取到手机号';

						uni.showModal({
							title: '登录成功',
							content: `欢迎 ${this.userInfo.nickname || '微信用户'}！
${phoneDisplay}`,
							showCancel: false,
							confirmText: '开始使用'
						});

						// 显示欢迎信息
						this.showWelcomeMessage(result);
					} else {
						throw new Error(result.error || '登录失败')
					}
				} catch (error) {
					console.error('❌ 完整登录失败:', error);

					// 如果是 code 相关错误，提供重试选项
					if (error.message && (error.message.includes('code') || error.message.includes('40029'))) {
						// console.log('🔄 检测到code相关错误，提供重试选项')
						uni.showModal({
							title: '登录失败',
							content: '登录凭证已过期，是否重新尝试？\n\n错误信息：' + error.message,
							confirmText: '重新登录',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									// console.log('🔄 用户选择重新登录')
									// 重新尝试登录
									setTimeout(() => {
										this.handleCompleteAuth(e);
									}, 500);
								}
							}
						});
					} else {
						uni.showToast({
							title: error.message || '登录失败，请重试',
							icon: 'none',
							duration: 3000
						});
					}
				} finally {
					this.isLogging = false;
				}
			},



			/**
			 * 显示欢迎消息
			 */
			showWelcomeMessage(result) {
				if (result.isNewUser) {
					setTimeout(() => {
						uni.showModal({
							title: '欢迎新用户',
							content: `欢迎 ${result.userInfo.nickname} 使用SA系统！我们为您提供专业的心理健康服务。`,
							showCancel: false,
							confirmText: '开始体验'
						});
					}, 1000);
				} else {
					uni.showToast({
						title: `欢迎回来，${result.userInfo.nickname}`,
						icon: 'success',
						duration: 2000
					});
				}
			},

			/**
			 * 处理退出登录
			 */
			async handleLogout() {
				try {
					const confirm = await new Promise((resolve) => {
						uni.showModal({
							title: '确认退出',
							content: '确定要退出登录吗？',
							success: (res) => resolve(res.confirm)
						});
					});

					if (confirm) {
						const result = await enhancedAuthManager.performLogout();
						if (result.success) {
							this.userInfo = null;
							// 清除定位信息
							this.locationInfo = null;
							locationManager.clearLocationCache();
							// console.log('👋 用户已退出登录')
						}
					}
				} catch (error) {
					console.error('❌ 退出登录失败:', error);
				}
			},

			/**
			 * 检查定位状态
			 */
			async checkLocationStatus() {
				if (this.isLocating) {
					return;
				}

				try {
					// 检查用户是否手动选择了城市，如果是则不再自动定位
					const userSelectedCity = uni.getStorageSync('userSelectedCity');
					if (userSelectedCity) {
						// console.log('👥 用户已手动选择城市，跳过自动定位');
						return;
					}

					// 检查是否已有有效定位
					const cachedLocation = locationManager.getCachedLocation();
					if (cachedLocation) {
						console.log('📍 已有有效定位信息');
						this.locationInfo = cachedLocation;
						// 更新城市信息
						this.updateCityInfo(cachedLocation);
						return;
					}

					// 如果没有有效定位，发起定位请求
					// console.log('🔍 没有有效定位信息，发起定位请求...');
					this.isLocating = true;
					const location = await locationManager.getUserLocation(true);
					this.locationInfo = location;
					console.log('✅ 定位成功，位置信息:', location);

					// 更新城市信息
					this.updateCityInfo(location);

					// 根据定位获取附近机构
					this.getNearbyInstitutions(location);

				} catch (error) {
					console.error('❌ 定位失败:', error);
					// 定位失败时不影响用户体验，使用默认城市
					uni.showToast({
						title: '定位失败，使用默认城市',
						icon: 'none',
						duration: 2000
					});
				} finally {
					this.isLocating = false;
				}
			},

			/**
			 * 更新城市信息
			 */
			updateCityInfo(location) {
				if (location.cityInfo && location.cityInfo.city) {
					const cityName = location.cityInfo.city;
					console.log('🏙️ 更新城市信息为:', cityName);
					// 通知搜索定位组件更新城市
					uni.$emit('updateCity', cityName);
				}
			},

			/**
			 * 根据定位获取附近机构
			 */
			getNearbyInstitutions(location) {
				// console.log('🏢 根据定位获取附近机构...');
				if (!location || !location.latitude || !location.longitude) {
					console.warn('⚠️ 无效的位置信息，无法获取附近机构');
					return;
				}

				// 调用API获取附近机构
				// 注意：这里需要后端支持根据经纬度获取附近机构的接口
				// 由于api.js中的getAgencList接口目前不支持传递经纬度参数
				// 这里暂时使用模拟数据，实际项目中需要修改API调用
				console.log('🌐 准备调用API获取附近机构，参数:', {
					latitude: location.latitude,
					longitude: location.longitude
				});

				// 模拟API调用延迟
				setTimeout(() => {
					// console.log('✅ 附近机构获取成功');
					// 这里可以根据实际情况决定是否更新institutionList
					// this.institutionList = nearbyInstitutions;
				}, 1000);
			},

			/**
			 * 关闭授权弹窗
			 */
			closeAuthModal() {
				this.showAuthModal = false;
				// console.log('❌ 用户选择暂不登录');
			},

			/**
			 * 获取banner数据
			 */
			getbannerData() {
				// console.log('🖼️ 获取Banner数据...')
				getBanner().then(res => {
					// console.log('✅ Banner数据获取成功:', res);
					this.banner = res || [];
				}).catch(error => {
					// console.error('❌ 获取Banner失败:', error);
					this.banner = [];
				});
			},
			/**
			 * 获取机构数据
			 */
			getAgencListData() {
				// console.log('🖼️ 获取机构数据...')
				// 准备请求参数
				const requestParams = {
					aid: 0
				};

				// 如果有定位信息，添加经纬度参数
				if (this.locationInfo && this.locationInfo.latitude && this.locationInfo.longitude) {
					requestParams.latitude = this.locationInfo.latitude;
					requestParams.longitude = this.locationInfo.longitude;
					// console.log('📍 添加定位参数:', requestParams);
				}

				getAgencList(requestParams).then(res => {
					// console.log('✅ 获取机构数据:', res);
					this.institutionList = res || [];
				}).catch(error => {
					// console.error('❌ 获取机构数据:', error);
					this.institutionList = [];
				});
			},
			change(e) {
				// console.log('e:', e);
			},

			// 更新附近机构列表
			updateInstitutionList() {
				// console.log('🏢 更新机构列表...')
				// 实际项目中应该调用接口获取数据
				setTimeout(() => {
					// console.log('✅ 机构列表更新完成')
				}, 500);
			},

			// 轮播图变化事件处理函数
			onBannerChange(e) {
				this.currentBannerIndex = e.detail.current;
			},

			// 搜索功能
			search(e) {
				// console.log('🔍 搜索内容:', e);
			},

			// 导航到更多机构页面
            navigateToPsychologist() {
                uni.navigateTo({
                    url: '/pages/institution/institution'
                });
            },

            // 导航到热门课程页面
            navigateToAppointment() {
                uni.switchTab({
                    url: '/pages/course/course'
                });
            },

            // 导航跳转热门活动
            navigateToActivity() {
                uni.switchTab({
                    url: '/pages/activity/activity'
                });
            },

            // 导航到心理咨询页面
            navigateToCenter() {
                uni.switchTab({
                    url: '/pages/consult/consult'
                });
            },

            // 导航跳转招聘页面（需要登录验证）
            async navigateToRecruitment() {
                //const isLoggedIn = await this.checkLoginAndShowAuth();
                //if (isLoggedIn) {
                    uni.navigateTo({
                        url: '/pages/institution/institution'
                    });
                //}
            },

            // 导航到机构首页
            navigateToInstitutionDetail(id) {
                // console.log(id,'id');
                uni.navigateTo({
                    url: `/pages/agency/agency?id=${id}`
                });
            }
		}
	};
</script>

<style>
	.bg-home {
		background-color: #f5f5f5;
	}

	/* 用户信息栏样式 */
	.user-info-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		overflow: hidden;
		margin-right: 20rpx;
		border: 3rpx solid rgba(255, 255, 255, 0.3);
	}

	.user-avatar image {
		width: 100%;
		height: 100%;
	}

	.user-details {
		flex: 1;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.user-phone {
		font-size: 24rpx;
		opacity: 0.8;
	}

	.user-actions {
		display: flex;
		align-items: center;
	}

	.logout-btn {
		background-color: rgba(255, 255, 255, 0.2);
		color: white;
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 20rpx;
		font-size: 24rpx;
		padding: 8rpx 16rpx;
	}

	.logout-btn:active {
		background-color: rgba(255, 255, 255, 0.1);
	}

	/* 登录授权弹窗样式 */
	.auth-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		padding: 40rpx;
	}

	.auth-modal {
		background-color: white;
		border-radius: 32rpx;
		padding: 60rpx 40rpx 40rpx;
		width: 100%;
		max-width: 600rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
	}

	.auth-modal-header {
		text-align: center;
		margin-bottom: 40rpx;
	}

	.auth-modal-logo {
		width: 120rpx;
		height: 120rpx;
		border-radius: 24rpx;
		margin-bottom: 24rpx;
	}

	.auth-modal-title {
		font-size: 40rpx;
		font-weight: 700;
		color: #1F2937;
		margin-bottom: 16rpx;
	}

	.auth-modal-subtitle {
		font-size: 28rpx;
		color: #6B7280;
		line-height: 1.5;
	}

	.auth-modal-content {
		margin-bottom: 40rpx;
	}

	.auth-benefits {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.benefit-item {
		display: flex;
		align-items: center;
		padding: 16rpx;
		background-color: #F9FAFB;
		border-radius: 16rpx;
	}

	.benefit-icon {
		font-size: 28rpx;
		margin-right: 16rpx;
	}

	.benefit-text {
		font-size: 26rpx;
		color: #374151;
		flex: 1;
	}

	.auth-modal-actions {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.auth-btn {
		height: 88rpx;
		border-radius: 24rpx;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.auth-btn-primary {
		background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
		color: white;
	}

	.auth-btn-primary:active {
		opacity: 0.9;
	}

	.auth-btn-text {
		background-color: transparent;
		color: #6B7280;
		font-size: 28rpx;
		height: 60rpx;
	}

	.auth-btn-text:active {
		color: #374151;
	}

	/* 原有样式保持不变 */
	page,
	view,
	text,
	image,
	swiper,
	swiper-item,
	input,
	button {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	page.page {
		background-color: #F9FAFB;
	}

	.content {
		width: 100%;
		transform: translateY(-135rpx);
		/* background-color: #f5f5f5; */
		color: white;
		min-height: calc(100vh - 110rpx);
	}

	.bg-p {
		position: relative;
		height: 700rpx;
		margin-top: 190rpx;
	}

	.bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		/* z-index: -1; */
	}

	.search-select.data-v-33364a14 {
		background-color: transparent;
	}

	/* 轮播图区域 */
	.banner-model {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 35rpx 30rpx 0;
		position: relative;
	}

	.banner {
		width: 100%;
		height: 400rpx;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 6rpx -1rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx -2rpx rgba(0, 0, 0, 0.1);
	}

	.banner .banner-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* 自定义轮播指示器样式 */
	.swiper-indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 20rpx;
		width: 100%;
		z-index: 10;
	}

	.swiper-indicator-item {
		width: 12rpx;
		height: 12rpx;
		border-radius: 6rpx;
		background-color: rgba(255, 255, 255, 0.5);
		margin: 0 6rpx;
		display: inline-block;
		transition: all 0.3s ease;
	}

	.swiper-indicator-active {
		width: 30rpx;
		background-color: white;
	}

	/* 功能导航模块样式 */
	.function-modules {
		padding: 40rpx 30rpx 20rpx;
	}

	.function-modules-wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 12rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	/* 模块卡片基础样式 */
	.module-card {
		width: 680rpx;
		height: 184rpx;
		border-radius: 24rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 10rpx;
		display: flex;
		align-items: center;

		transition: all 0.3s ease;
		overflow: hidden;
	}

	.module-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 6rpx;
	}

	.module-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
	}

	/* 模块图标样式 */
	.module-icon {
		width: 98%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 16rpx;
		/* margin-right: 20rpx; */
		background-color: rgba(255, 255, 255, 0.8);
	}

	.module-icon-img {
		width: 680rpx;
		height: 184rpx;
	}

	/* 招聘模块 */
	.recruitment {
		width: 100%;
		padding: 20rpx 15rpx;
		display: flex;
	}

	.recruitment-box {
		width: 100%;
		align-items: center;
	}

	.recruitment-box-img {
		width: 100%;
	}

	/* 机构模块样式 */
	.institution {
		width: 100%;
		margin-top: 60rpx;
		padding: 0 30rpx 60rpx;
	}

	.institution-title {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.institution-title-icn {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 16rpx;
		margin-right: 16rpx;
	}

	.institution-title-icn-img {
		width: 32rpx;
		height: 32rpx;
	}

	.institution-title-title {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
	}

	/* 机构列表样式 */
	.institution-model {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: -12rpx;
		margin-bottom: -12rpx;
	}

	.institution-model-one {
		width: 693rpx;
		height: 460rpx;
		border-radius: 24rpx;
		overflow: hidden;
		background-color: white;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
		transition: all 0.3s ease;
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		color: #000;
	}

	.institution-model-one-img {
		height: 300rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 20;
		background-color: #fff;
	}

	.institution-model-one-img-img {
		width: 90%;
		height: 100%;
		object-fit: cover;
	}

	.institution-model-text {
		padding: 24rpx;
	}

	.institution-model-text-title {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 16rpx;
	}

	.institution-model-text-title-name {
		font-size: 34rpx;
		color: #1F2937;
		font-weight: 600;
		flex: 1;
		margin-right: 16rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.institution-model-text-title-distance {
		display: flex;
		align-items: center;
		color: #6B7280;
		font-size: 28rpx;
	}

	.institution-model-text-title-distance-img {
		margin-top: 5rpx;
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.institution-model-text-title-distance-img-img {
		width: 100%;
		height: 100%;
	}

	.institution-model-text-title-address {
		font-size: 26rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.banner-model,
	.jump-model,
	.institution {
		opacity: 1;
	}

	.uni-searchbar__box {
		width: 485rpx !important;
	}
</style>